{% extends "templates/base.html" %}

{% block js %}
    {{ block.super }}
    <script src="{{ STATIC_URL }}js/forms.js" type="text/javascript"></script>
    <script src="{{ STATIC_URL }}js/jquery.googlemaps1.01.js" type="text/javascript"></script>
    <script src="http://maps.google.com/maps?file=api&amp;v=2&amp;hl=en&amp;sensor=true&amp;key=ABQIAAAAWCGzSMrk7YDL2KSdECDFthRCU6CW1wRB4NQsX5PSi053h5zzZhQIZ5ivn4VAQx53xyYuNrvkOmgO1w" type="text/javascript"></script>
    <script type="text/javascript">
		$(document).ready(function() {
		   $('#map_canvas').googleMaps({
			  latitude: 40.68221,
			  longitude: -73.971212,
					markers: {
					latitude: 	40.68221,
					longitude: -73.971212
				}
		   });
		});
	</script>
{% endblock %}

{% block content %}
    <div class="wrapper">
        <div class="alpha prefix_1 grid_14">
            <div class="border-1">
                <h3 class="p3">How to Find Us</h3>
                <div class="wrapper">
                    <figure class="img-style img-indent">
                        <div id="map_canvas"></div>
                    </figure>
                    <div class="extra-wrap">
                    <h5 class="indent-bot">Cum sociis natoque <span>uset magnis dis.</span></h5>
                    <p>Sed ullamcorper pulvinar nisi, in auctor nibh rutrum eleifend. Nullam rutrum placerat ligula eget <br />molestie. Donec ullamcorper nulla hendrerit tellus sodales ultricies. In condimentum venenatis orci et.</p>
                    <p>Pellentesque rhoncus magna euismod. Nam lorem mi, vehicula <br />ut tempor non, commodo vitae <br />nibh. Maecenas congue aliquam tus, ac auctor lorem.</p>
                    </div>
                </div>
            </div>
        </div>
        <div class="grid_8 suffix_1 omega">
            <h3 class="margin-bot">Contact Form</h3>
            <form action="#" id="contact-form" class="form">
                <div class="success"> Contact form submitted!<br>
                <strong>We will be in touch soon.</strong> </div>
                <fieldset>
                    <label class="name">
                    <input type="text" value="Name:">
                    <span class="error">*This is not a valid name.</span> <span class="empty">*This field is required.</span> </label>
                    <label class="email">
                    <input type="email" value="E-mail:">
                    <span class="error">*This is not a valid email address.</span> <span class="empty">*This field is required.</span> </label>
                    <label class="phone">
                    <input type="tel" value="Phone:">
                    <span class="error">*This is not a valid phone number.</span> <span class="empty">*This field is required.</span> </label>
                    <label class="message">
                    <textarea>Message:</textarea>
                    <span class="error">*The message is too short.</span> <span class="empty">*This field is required.</span> </label>
                    <div class="buttons-wrapper">
                        <a class="button" data-type="reset">clear</a>
                        <a class="button" data-type="submit">send</a>                          
                    </div>											
                </fieldset>
            </form>
        </div>
    </div>
{% endblock %}

{% block footerjs %}
    {{ block.super }}
    <script type="text/javascript">
        $(window).load(function(){
            $('#contact-form').forms({
                ownerEmail:'#'
            })
        })
	</script>
{% endblock %}
